<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="视频名称" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入视频名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <el-select
          v-model="queryParams.categoryId"
          placeholder="视频分类"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in categoryArr"
            :key="item.categoryId"
            :label="item.name"
            :value="item.categoryId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="视频状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in statusArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:role:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:role:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:role:remove']"
          >删除</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:role:export']"
          >导出</el-button
        >
      </el-col> -->
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="videoList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="视频名称"
        prop="title"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="上传者"
        prop="createBy"
        align="center"
        :show-overflow-tooltip="true"
        width="150"
      />
      <el-table-column
        label="分类"
        prop="categoryMsg"
        align="center"
        :show-overflow-tooltip="true"
        width="150"
      >
        <!-- <template slot-scope="scope">
          <el-tag >{{
           scope.row.categoryMsg
          }}</el-tag>
        </template> -->
      </el-table-column>
      <!-- <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column> -->

      <el-table-column
        label="审核结果"
        prop="auditState"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <el-tag :type="tagType(scope.row.auditState)">{{
            tagText(scope.row.auditState)
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="视频描述"
        prop="description"
        :show-overflow-tooltip="true"
        width="190"
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="150"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-tickets"
            @click="handleDetail(scope.row)"
            v-hasPermi="['system:role:edit']"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:role:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:role:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 新增视频dialog -->
    <el-dialog
      :title="dialogStatus.title"
      :visible.sync="dialogStatus.visible"
      width="500px"
      append-to-body
      center
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="dialogData"
        :rules="rules"
        label-width="100px"
        v-loading="dialogLoading"
      >
        <el-form-item label="视频标题" prop="title">
          <el-input
            :disabled="dialogStatus.isDetail"
            v-model="dialogData.title"
            placeholder="请输入视频标题"
          />
        </el-form-item>
        <el-form-item label="视频上传" v-if="dialogStatus.isAdd">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="#"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false"
            :limit="1"
            :on-change="beforeUpload"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <!-- <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >上传到服务器</el-button
            > -->
            <div slot="tip" class="el-upload__tip">
              请上传一个视频文件，若要更换请先移出已选择视频！
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="资源视频" v-else>
          <div
            :id="'player-' + dialogData.videoId"
            style="width: 300px; height: 200px"
          ></div>
        </el-form-item>
        <!-- <el-form-item label="视频状态" prop="type">
          <el-input-number
            v-model="dialogData.type"
            controls-position="right"
            :min="0"
          />
        </el-form-item> -->
        <el-form-item label="视频状态" prop="status">
          <el-select
            :disabled="dialogStatus.isDetail"
            v-model="dialogData.status"
            placeholder="视频状态"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="item in statusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="视频分类" prop="categoryId">
          <el-select
            :disabled="dialogStatus.isDetail"
            v-model="dialogData.categoryId"
            placeholder="视频分类"
            clearable
            style="width: 240px"
            @change="handleCategoryChange"
          >
            <el-option
              v-for="item in categoryArr"
              :key="item.categoryId"
              :label="item.name"
              :value="item.categoryId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="视频标签" prop="tagIds">
          <el-select
            :disabled="dialogStatus.isDetail"
            v-model="dialogData.tagIds"
            placeholder="请先选择分类"
            multiple
            clearable
            style="width: 240px"
            @change="handleTabChange"
          >
            <el-option
              v-for="item in tagArr"
              :key="item.tagId"
              :label="item.content"
              :value="item.tagId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="描述">
          <el-input
            :disabled="dialogStatus.isDetail"
            v-model="dialogData.description"
            type="textarea"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!dialogStatus.isDetail">
        <el-button type="primary" @click="handleSubmitForm">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 上传进度 -->
    <el-dialog
      :visible.sync="dialogStatus.isUploading"
      title="上传中"
      width="14%"
      center
      :show-close="false"
      :close-on-click-modal="false"
      @close="closeUploading"
    >
      <div style="display: flex; text-align: center; justify-content: center">
        <el-progress
          type="dashboard"
          :percentage="percentage"
          :color="colors"
        ></el-progress>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleUploadCancel" v-if="!isCanceled"
          >暂 停</el-button
        >
        <el-button type="primary" @click="handleReupload" v-else
          >继续上传</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUploadAuth as getUploadAuthApi,
  getVideoList as getVideoListApi,
  getPlayAuth as getPlayAuthApi,
  getVideoDetail as getVideoDetailApi,
  updateVideo as updateVideoApi,
  deleteVideo as deleteVideoApi,
  getCategoryList as getCategoryListApi,
  getCategoryTab as getCategoryTabApi,
  refreshUploadAuth as refreshUploadAuthApi,
} from "../../../api/video/videoList";
import { Notification, MessageBox, Message, Loading } from "element-ui";
let myUploader = {};
import to from "await-to-js";
export default {
  name: "videoList",
  data() {
    return {
      queryParams: {
        name: "",
        status: "",
        type: "",
        pageSize: 10,
        pageNum: 1,
        orderByColumn: "createTime",
        isAsc: "desc",
      },
      queryCategoryParams: {
        pageSize: 10,
        pageNum: 1,
        orderByColumn: "createTime",
        isAsc: "desc",
      },
      queryTagParams: {
        categoryId: "",
        pageSize: 10,
        pageNum: 1,
        orderByColumn: "createTime",
        isAsc: "desc",
      },
      // getAuthParams: {
      //   fileName: "",
      //   title: "",
      // },
      // 多选
      multiple: true,
      // 单选状态
      single: true,
      ids: [],
      // 是否展示search
      showSearch: true,
      // 加载状态
      loading: false,
      dialogLoading: false,
      // 视频列表
      videoList: [],
      // 列表总数
      total: 0,
      // 将要上传的文件
      file: "",
      fileList: [],
      // 视频上传进度
      percentage: 0,
      // 视频播放器
      videoPlayer: "",
      initDialogStatus: {
        isDetail: false,
        isUpdate: false,
        isAdd: false,
        visible: false,
        isUploading: false,
        title: "",
      },
      dialogStatus: {
        isDetail: false,
        isUpdate: false,
        isAdd: false,
        visible: false,
        isUploading: false,
        title: "",
      },
      dialogData: {
        categoryId: "",
        tagIds: [],
        title: "",
        description: "",
        type: "",
        fileName: "",
        status: "0",
      },
      typeArr: [
        {
          label: "option1",
          value: "1",
        },
        {
          label: "option2",
          value: "2",
        },
        {
          label: "option3",
          value: "3",
        },
      ],
      statusArr: [
        {
          label: "停用",
          value: "1",
        },
        {
          label: "正常",
          value: "0",
        },
      ],
      categoryArr: [],
      tagArr: [],
      rules: {
        title: [
          { required: true, message: "视频标题不能为空！", trigger: "blur" },
        ],
        status: [
          { required: true, message: "状态为必选项！", trigger: "blur" },
        ],
      },
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
      uploader: null,
      // 是否暂停了
      isCanceled: false,
      // 是否上传完
      isFinish: true,
    };
  },
  methods: {
    // 重置
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 搜索
    handleQuery() {
      this.getList();
    },
    // 获取列表
    async getList() {
      this.loading = true;
      const [err, res] = await to(getVideoListApi(this.queryParams));
      if (!err) {
        this.videoList = res.rows;
        this.videoList.forEach((item) => {
          if (item.categoryVo) {
            item.categoryMsg = item.categoryVo.name;
          }
        });
        console.log(this.videoList);
        this.total = Number(res.total);
        this.loading = false;
      } else {
        Message.error("获取视频列表失败");
        this.loading = false;
      }
    },
    // 获取资源详情
    async getVideoDetail(id) {
      const [err, res] = await to(getVideoDetailApi(id));
      if (!err) {
        console.log(res);
        this.dialogData = res.data;
        // 获取当前分类的标签列表
        if (res.data.categoryId) {
          this.queryTagParams.categoryId = res.data.categoryId;
          console.log(this.queryTagParams);
          const [err2, res2] = await to(getCategoryTabApi(this.queryTagParams));
          if (!err2) {
            console.log(res2);
            this.tagArr = res2.rows;
          }
          this.dialogData.tagIds = res.data.tagList.map((item) => {
            return item.tagId;
          });
          console.log(this.dialogData.tagIds);
        }
      }
    },
    // 点击视频详情按钮
    async handleDetail(row) {
      this.dialogLoading = true;
      this.dialogStatus.visible = true;
      this.dialogStatus.isDetail = true;
      this.dialogStatus.title = "视频详情";
      // 获取视频详情
      await this.getVideoDetail(row.videoId);
      // 获取播放凭证
      const [err, res] = await to(getPlayAuthApi(row.videoId));
      if (!err) {
        console.log(res);
        this.videoPlayer = new Aliplayer({
          id: "player-" + row.videoId,
          width: "100%",
          vid: res.data.vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
          playauth: res.data.playAuth, //必选参数。音视频播放凭证。
          autoplay: true,
          preload: true,
        });
        this.dialogLoading = false;
      } else {
        Message.error("获取播放凭证失败！");
        this.dialogLoading = false;
      }
    },
    // 添加视频按钮
    handleAdd() {
      this.dialogStatus.visible = true;
      this.dialogStatus.isAdd = true;
      this.dialogStatus.title = "新增视频";
    },
    // 修改视频按钮
    async handleUpdate(row) {
      this.dialogStatus.visible = true;
      this.dialogStatus.isUpdate = true;
      this.dialogStatus.title = "更新视频";
      this.dialogLoading = true;
      let _id;
      if (row.videoId) {
        _id = row.videoId;
      } else {
        _id = this.ids[0];
      }
      // 获取视频详情
      await this.getVideoDetail(_id);
      // 获取播放凭证
      const [err, res] = await to(getPlayAuthApi(_id));
      if (!err) {
        console.log(res);
        // await nextTick(() => {
        this.videoPlayer = new Aliplayer({
          id: "player-" + _id,
          width: "100%",
          vid: res.data.vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
          playauth: res.data.playAuth, //必选参数。音视频播放凭证。
          autoplay: true,
          preload: true,
        });
        // });
        this.dialogLoading = false;
      } else {
        Message.error("获取播放凭证失败！");
        this.dialogLoading = false;
      }
    },
    // 修改视频状态
    async handleStatusChange(row) {
      console.log(row);
      this.loading = true;
      row.status === "1" ? "0" : "1";
      const [err, res] = await to(updateVideoApi(row));
      if (!err) {
        // 更新成功
        console.log(res);
        Message.success("更改成功");
        this.getList();
        this.loading = false;
      } else {
        Message.error("更改失败");
        this.getList();
        this.loading = false;
      }
    },
    // 删除按钮
    async handleDelete(row) {
      this.loading = true;

      const message =
        row.videoId === undefined || null
          ? "是否确认删除已勾选的数据项"
          : '是否确认删除视频编号为"' + row.title + '"的数据项?';
      const [err, res] = await to(
        this.$confirm(message, "提示", {
          confirmButtonText: "确定",
          handleCancelButtonText: "取消",
          type: "warning",
        })
      );
      if (!err) {
        if (row.videoId) {
          const [err] = await to(deleteVideoApi(row.videoId));
          if (!err) {
            Message.success("删除成功");
            this.getList();
            this.loading = false;
          } else {
            Message.error("删除失败");
            this.getList();
            this.loading = false;
          }
        } else {
          const [err] = await to(deleteVideoApi(this.ids));
          if (!err) {
            Message.success("删除成功");
            this.getList();
            this.loading = false;
          } else {
            Message.error("删除失败");
            this.getList();
            this.loading = false;
          }
        }
      } else {
        Message.info("取消成功");
        this.loading = false;
      }
    },
    // 列表勾选
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.videoId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
      console.log(this.ids);
    },
    // dialog提交按钮
    handleSubmitForm() {
      this.$refs["form"].validate(async (vilid) => {
        if (vilid) {
          if (this.dialogData.videoId) {
            // 有id为更新
            const [err, res] = await to(updateVideoApi(this.dialogData));
            if (!err) {
              // 更新成功
              console.log(res);
              Message.success("更新成功");
              this.dialogStatus.visible = false;
              this.getList();
            } else {
              Message.error("更新失败");
            }
          } else {
            // 无id为新增
            if (this.dialogData.fileName === "") {
              Message.info("你未选择任何视频文件，请先添加视频文件！");
            } else {
              this.dialogStatus.isUploading = true;
              // this.isFinish = false;
              this.sendOSS();
            }
          }
        }
      });
    },
    // 取消按钮
    handleCancel() {
      this.dialogStatus.visible = false;
    },
    // 关闭dialog
    closeDialog() {
      this.loading = false;
      this.dialogLoading = false;
      this.fileList = [];
      this.dialogStatus = Object.assign({}, this.initDialogStatus);
      this.dialogData = {
        title: "",
        description: "",
        type: "",
        fileName: "",
        status: "0",
      };
      // 清空播放器
      if (this.videoPlayer != "") {
        this.videoPlayer.dispose();
      }
      console.log(this.dialogStatus);
    },
    // 关闭上传进度dialog
    closeUploading() {},
    // 文件上传前的钩子
    async beforeUpload(file) {
      console.log(file);
      // 拿到文件和文件名
      // if (this.dialogData.fileName != "") {
      //   Message.error("文件更改成功！");
      //   this.fileList.pop()
      //   console.log(this.dialogData.fileName);
      // }
      if (file.raw.type.startsWith("video/")) {
        this.file = file.raw;
        this.dialogData.fileName = file.name;
        console.log(this.dialogData.fileName);
      } else {
        Message.error("请选择视频文件上传！");
        this.fileList = [];
      }

      return false;
    },
    // 移除已选择文件
    handleRemove(file) {
      console.log(file.raw);
      this.file = "";
      this.dialogData.fileName = "";
      Message.success("移出成功");
    },
    // 初始化上传
    initUpload() {
      return new AliyunUpload.Vod({
        //userID，必填，您可以使用阿里云账号访问账号中心（https://account.console.aliyun.com/），即可查看账号ID
        userId: "1424582593277949",
        //上传到视频点播的地域，默认值为'cn-shanghai'，
        //eu-central-1，ap-southeast-1
        region: "",
        //分片大小默认1 MB，不能小于100 KB（100*1024）
        partSize: 1048576,
        //并行上传分片个数，默认5
        parallel: 5,
        //网络原因失败时，重新上传次数，默认为3
        retryCount: 3,
        //网络原因失败时，重新上传间隔时间，默认为2秒
        retryDuration: 2,
        //开始上传

        onUploadstarted: async (uploadInfo) => {
          console.log(uploadInfo);
          // if (!uploadInfo.videoId) {
          //   console.log("1");
          //   const [err, res] = await to(getUploadAuthApi(this.dialogData));
          //   if (!err) {
          //     const resKey = res?.data ?? undefined;
          //     myUploader.setUploadAuthAndAddress(
          //       uploadInfo,
          //       resKey.uploadAuth ?? "",
          //       resKey.uploadAddress ?? "",
          //       resKey.vid ?? ""
          //     );
          //   } else {
          //     Message.error("获取凭证失败");
          //   }
          // } else {
          //   console.log(2);
          //   const [err, res] = await to(
          //     refreshUploadAuthApi(uploadInfo.videoId)
          //   );
          //   if (!err) {
          //     console.log(res);
          //   }
          // }
        },
        // //文件上传成功
        onUploadSucceed: async function (uploadInfo) {},
        // 文件上传失败
        onUploadFailed: function (uploadInfo, code, message) {},
        //文件上传进度，单位：字节
        onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {},
        //上传凭证或STS token超时
        onUploadTokenExpired: function (uploadInfo) {},
        //全部文件上传结束
        onUploadEnd: function (uploadInfo) {},
        // 取消文件上传
        onUploadCanceled: function (uploadInfo, code, message) {},
      });
    },
    // 上传阿里云
    sendOSS() {
      // 获取上传实例
      myUploader = this.initUpload();
      // 添加上传文件
      myUploader.addFile(this.file);
      // 开始上传

      // 获取凭证并设置
      myUploader.options.onUploadstarted = async (uploaderInfo) => {
        console.log(uploaderInfo, this.isFinish);
        if (this.isFinish) {
          const [err, res] = await to(getUploadAuthApi(this.dialogData));
          if (!err) {
            const resKey = res?.data ?? undefined;
            myUploader.setUploadAuthAndAddress(
              uploaderInfo,
              resKey.uploadAuth ?? "",
              resKey.uploadAddress ?? "",
              resKey.vid ?? ""
            );
            this.isFinish = false;
          } else {
            Message.error("获取凭证失败");
          }
        } else {
          const [err, res] = await to(
            refreshUploadAuthApi(uploaderInfo.videoId)
          );
          if (!err) {
            const resKey = res?.data ?? undefined;
            myUploader.setUploadAuthAndAddress(
              uploaderInfo,
              resKey.uploadAuth ?? "",
              resKey.uploadAddress ?? "",
              resKey.vid ?? ""
            );
          }
        }
      };
      myUploader.startUpload();
      // 开始上传
      this.dialogStatus.isUploading = true;
      // 上传成功
      myUploader.options.onUploadSucceed = async (uploadInfo) => {
        this.getList();
        this.dialogStatus.visible = false;
      };

      // 上传进度
      myUploader.options.onUploadProgress = async (
        uploadInfo,
        totalSize,
        loadedPercent
      ) => {
        this.percentage = Math.floor(loadedPercent * 100);
        this.isFinish = false;
        if (this.percentage === 100) {
          Message.success("上传成功");
          this.percentage = 0;
          this.dialogStatus.isUploading = false;
          this.dialogStatus.visible = false;
          this.isFinish = true;
        }
      };
      // 上传失败
      myUploader.options.onUploadFailed = (uploadInfo, code, message) => {
        console.log(uploadInfo, code, message);
        Message.error("上传失败");
      };
    },
    // 暂停上传
    handleUploadCancel() {
      console.log(myUploader);
      // 暂停上传
      myUploader.stopUpload();
      this.isCanceled = true;
    },
    // 重新上传按钮
    handleReupload() {
      this.isCanceled = false;
      // console.log(myUploader.getCheckpoint());
      myUploader.startUpload();
    },
    tagType(typeCode) {
      if (typeCode === "0") {
        return "info";
      } else if (typeCode === "1") {
        return "success";
      } else {
        return "danger";
      }
    },
    tagText(typeCode) {
      if (typeCode === "0") {
        return "未审核";
      } else if (typeCode === "1") {
        return "审核通过";
      } else {
        return "被驳回";
      }
    },
    // 获取分类列表
    async getCategoryList() {
      const [err, res] = await to(getCategoryListApi(this.queryCategoryParams));
      if (!err) {
        console.log(res);
        this.categoryArr = res.rows;
      }
    },
    // 分类选择变化
    async handleCategoryChange(value) {
      console.log(value);
      this.tagArr = [];
      this.dialogData.tagIds = [];
      this.queryTagParams.categoryId = value;
      const [err, res] = await to(getCategoryTabApi(this.queryTagParams));
      if (!err) {
        console.log(res);
        this.tagArr = res.rows;
      }
    },
    handleTabChange(value) {
      this.dialogData.tagIds = value;
      console.log(value, this.dialogData.tagIds);
    },
  },
  created() {
    this.getList();
    this.getCategoryList();
  },
};
</script>
